<html>
    <head>
        <link href="/css/ele.css" rel="stylesheet" />
    </head>
    <body>

    <h1>转换卡通图片</h1>
    <div id="app">
        <form id="uploadAvatarForm" enctype="multipart/form-data">

            <span>请上传图片：</span>
            <el-upload
                    class="avatar-uploader"
                    action="/avatar/upload"
                    name="avatarFile"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                <img v-if="imageUrl" :src="'/avatar/loadAvatar/' + imageUrl" class="avatar" style="width: 250px;height: 300px">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

            <el-image v-if="imageUrl"
                    style="width: 250px; height: 300px"
                    :src="'/avatar/loadAvatar/' + imageUrl + '_cartoon'"
                    :fit="fit"></el-image>

        </form>

    </div>

    </body>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.form.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/ele.js"></script>
    <script>

        let app = new Vue({
            'el': '#app',
            data : {
                imageUrl : '',
                picUrl : ''
            },
            methods : {
                handleAvatarSuccess : function(res, file) {
                    this.imageUrl = res.data;
                }
            }
        });

        function uploadAvatar() {
            $('#uploadAvatarForm').ajaxSubmit({
                url : '/avatar/upload',
                type : 'post',
                success: function (result) {
                    if (result.code != 1000) {
                        alert(result.message);
                        return;
                    }

                    let pictureName = result.data;

                }
            })
        }


    </script>
</html>